<template>
	<view class="productList">
		<u-sticky offset-top="44">
			<view class="tabs">
				<view class="item" @click="changeCurrent(0)">
					<view class="item_t" :class="current==0?'t_active':''">会员商品</view>
					<view class="item_b" :class="current==0?'b_active':''">品质 · 臻品</view>
				</view>
				<view class="item" @click="changeCurrent(1)">
					<view class="item_t" :class="current==1?'t_active':''">积分兑换</view>
					<view class="item_b" :class="current==1?'b_active':''">好礼 · 相送</view>
				</view>
				<view class="item" @click="changeCurrent(2)">
					<view class="item_t" :class="current==2?'t_active':''">限时特惠</view>
					<view class="item_b" :class="current==2?'b_active':''">优惠 · 不断</view>
				</view>
			</view>
		</u-sticky>
		<view class="swiper_content">
			<swiper class="swiper" :current="current" @change="swiperChange" :style="{ height: swiperHeight + 'px' }">
				<swiper-item>
					<view class="swiper-item1">
						<view class="table_l">
							<view v-for="(item,index) in vipData" v-if="index % 2 != 0" :key="index">
								{{ item.name }}
							</view>
						</view>
						<view class="table_r">
							<view v-for="(item,index) in vipData" v-if="index % 2 == 0" :key="index">
								{{ item.name }}
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item2">
						<view class="pro_item">bbb</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item3">
						<view class="pro_item">ccc</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				swiperHeight: 0,
				vipData:[
					{ id:1,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:2,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:3,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:4,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:5,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:6,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:7,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:8,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:9,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 },
					{ id:10,name:'黑松露等哈是肯定会卡就是打卡手机核打击卡哈苏卡达合计',price:36.9,saleCount:24 }
				],
				pointData:[],
				timeData:[]
			}
		},
		mounted() {
			this.getSwiperHeight(this.current)
		},
		methods: {
			changeCurrent(num) {
				this.current = num
				this.getSwiperHeight(this.current)
			},
			swiperChange(e) {
				this.current = e.detail.current
				this.getSwiperHeight(this.current)
			},
			getSwiperHeight(num) {
				const query = uni.createSelectorQuery().in(this);
				let className = '.swiper-item' + (num + 1)
				query.select(className).boundingClientRect(({
					height
				}) => {
					this.swiperHeight = height
				}).exec();
			}
		}
	}
</script>

<style lang="less" scoped>
	.productList {
		width: 100%;

		.tabs {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ffffff;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #0b0904;

				.item_t {
					padding: 6rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eaeaea;
					font-weight: bold;
					font-size: 30rpx;
				}

				.item_b {
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #b1b1b1;
				}

				.t_active {
					color: #f0c748;
					border-bottom: 1px solid #f0c748;
				}

				.b_active {
					color: #f0c748;
				}
			}
		}

		.swiper_content {
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			.swiper-item1,
			.swiper-item2,
			.swiper-item3{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.table_l{
					flex: 1;
				}
				.table_r{
					flex: 1;
				}
			}
		}
	}
</style>